<template>
	<div class="page">
		<u-navbar>
			<view class="slot-wrap">
				<u-search placeholder="商品名称" v-model="searchForm.goodsName" @search="load" @custom="load"></u-search>
			</view>
		</u-navbar>
		<div class="drop-list" :style="{paddingTop:statusBarHeight + 'px' }">
			<div class="drop-list-tab">
				<u-tabs :list="list" active-color="#333" :is-scroll="false" :current="current" @change="changeTabs">
				</u-tabs>
			</div>
			<div class="drop-list-config" @click="handleClickScreen">
				<div>
					筛选
				</div>
			</div>
		</div>

		<div class="global-list" v-if="commentData.length != 0">
			<div class="global-item" @click="handleClickOrder(item)" v-for="(item,index) in commentData" :key="index">
				<!-- 订单来源，订单号，订单状态 -->
				<div class="flex global-top-col">
					<div class="global-sn">{{item.goodsName}}</div>
					<div class="global-orderStatus">
						{{item.grade =='GOOD' ?'好评' : item.grade == 'MODERATE' ? '中评' : '差评' }}</div>
				</div>
				<!-- 商品信息 -->
				<div class="flex goods-item">
					<div class="goods-name">评价内容：{{item.content}}</div>
					<div class="flex goods-right-col">
						<div class="goods-price" :style="{color:item.status != 'OPEN' ? '#ff6262' : ''}">
							{{item.status== 'OPEN' ? '展示' : '隐藏'}}</div>
						<div class="goods-price"></div>
					</div>
				</div>
				<div class="global-bottom-col flex">
					<div class="global-clientType">用户：{{item.memberName}}</div>
				</div>
				<div class="goods-follow-price">
					<div class="global-createTime">{{item.createTime}}</div>
					<div>
						回复状态：<span :style="{color:!item.replyStatus  ? '#ff6262' : ''}">
							{{item.replyStatus ? '已回复' : '未回复' }}</span>
					</div>
				</div>
			</div>
		</div>

		<popup memberName goodsName date ref="popup" @callback="screened" />

	</div>
</template>

<script>
	import {
		getMemberReview
	} from "@/api/member";
	import popup from "@/components/m-popup/index";
	let systemInfo = uni.getSystemInfoSync();
	export default {
		components: {
			popup,
		},
		data() {
			return {
				statusBarHeight: systemInfo.statusBarHeight,
				commentData: [], //评论列表
				current: 0,
				searchForm: {
					pageNumber: 1, // 当前页数
					pageSize: 10, // 页面大小
					sort: "createTime", // 默认排序字段
					order: "desc", // 默认排序方式
					startTime :"", // 起始时间
					endTime: "", // 终止时间
					goodsName: "",
					memberName: "",
				},
				list: [{
						name: "好评",
						value: "GOOD"
					},
					{
						name: "中评",
						value: "MODERATE"
					},
					{
						name: "差评",
						value: "WORSE"
					},
				],
			};
		},
		methods: {
			onShow() {
				this.commentData = [];
				this.searchForm.pageNumber = 1;
				this.init();
			},
			onReachBottom() {
				this.searchForm.pageNumber++;
				this.init();
			},
			// 点击订单
			handleClickOrder(val) {
				uni.navigateTo({
					url: `/pages/order/comment/detail?id=${val.id}`,
				});
			},
			// 筛选回调
			screened(val) {
				/**
				 * 1.循环出相同的字段进行赋值
				 * 2.将不同的字段进行赋值
				 */
				for (let key in val) {
					this.searchForm[key] != undefined ?
						(this.searchForm[key] = val[key]) :
						"";
				}
				this.searchForm.startTime=val.date?`${val.date[0]} 00:00:00`:""
				this.searchForm.endTime=val.date?`${val.date[1]} 23:59:59`:""

				this.load();
			},
			load() {
				this.searchForm.pageNumber = 1;
				this.commentData = [];
				this.init();
			},

			// 点击tab
			changeTabs(index) {
				this.current = index;
				this.searchForm.grade = this.list[index].value
				this.load()
			},
			// 点击筛选
			handleClickScreen() {
				this.$refs.popup.open();
			},

			async init() {
				uni.showLoading({
					title: "加载中",
				});
				this.current == 0 ?
					(this.searchForm.orderType = "NORMAL") :
					(this.searchForm.orderType = "VIRTUAL");
				//商品订单
				console.log(this.searchForm);
				let res = await getMemberReview(this.searchForm);
				if (res.data.success) {
					this.commentData.push(...res.data.result.records);
				}

				uni.hideLoading();
			},
		},
	};
</script>

<style lang="scss" scoped>
	@import "@/components/global.scss";

	.goods-name {
		margin-left: 0 !important;
		margin: 20rpx 0;
	}

	.global-bottom-col {
		margin: 0;
	}

	.global-createTime {
		margin: 10rpx 0;
	}

	@media screen and(min-width:750rpx) {
		/deep/ .u-navbar-inner {
			height: 100rpx !important;
		}

		/deep/ .u-navbar-placeholder {
			height: 100rpx !important;
		}
	}
	/* #ifdef MP-WEIXIN */
	/deep/ u-input{
		width: 100%;
	}
	/* #endif */
</style>
